<template>
  <view class="container">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="left" @click="goBack">
        <image class="back-icon" src="/static/back-icon.png"></image>
      </view>
      <text class="nav-title">扫码加油</text>
    </view>

    <!-- 设备信息卡片 -->
    <view class="equipment-card" @click="navigateToFuelRecords">
      <view class="card-content">
        <view class="title-row">
          <text class="equipment-title">小松挖掘机</text>
          <text class="equipment-id">BH-001</text>
        </view>
        
        <view class="equipment-image">
          <!-- 设备图片 -->
          <image class="equipment-img" src="/static/sb_image1.png" mode="aspectFit"></image>
        </view>
        
        <view class="stats-row">
          <view class="stat-item">
            <view class="stat-icon">
              <image src="/static/sb_time.png" class="stat-icon-img"></image>
            </view>
            <text class="stat-text">总计次数：31次</text>
          </view>
        </view>
        
        <view class="stats-row">
          <view class="stat-item">
            <view class="stat-icon">
              <image src="/static/sb_sj.png" class="stat-icon-img"></image>
            </view>
            <text class="stat-text">累计油量：2436.25 L        |      3,642,436.25 元</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 加油表单 -->
    <view class="form-container">
      <!-- 油品选择 -->
      <view class="form-item">
        <view class="form-label">
          <text>油品</text>
        </view>
        <view class="option-row">
          <view 
            v-for="(item, index) in fuelOptions" 
            :key="index"
            class="option-item"
            :class="{ 'option-selected': selectedFuel === item }"
            @click="selectFuel(item)"
          >
            <text class="option-text" :class="{ 'text-selected': selectedFuel === item }">{{ item }}</text>
          </view>
        </view>
      </view>
      
      <!-- 加油量 -->
      <view class="form-item">
        <view class="form-label">
          <text>加油量</text>
        </view>
        <view class="form-input">
          <input 
            type="number" 
            placeholder="请输入" 
            v-model="fuelAmount"
            placeholder-class="placeholder-style"
          />
        </view>
      </view>
      
      <!-- 加油金额 -->
      <view class="form-item">
        <view class="form-label">
          <text>加油金额</text>
        </view>
        <view class="form-input">
          <input 
            type="number" 
            placeholder="请选择" 
            v-model="fuelCost"
            placeholder-class="placeholder-style"
          />
        </view>
      </view>
      
      <!-- 加油地点 -->
      <view class="form-item">
        <view class="form-label">
          <text>加油地点</text>
        </view>
        <view class="form-input">
          <input 
            type="text" 
            placeholder="请输入" 
            v-model="fuelLocation"
            placeholder-class="placeholder-style"
          />
        </view>
      </view>
      
      <!-- 付款方式 -->
      <view class="form-item">
        <view class="form-label">
          <text>付款方式</text>
        </view>
        <view class="option-row">
          <view 
            v-for="(item, index) in paymentOptions" 
            :key="index"
            class="option-item"
            :class="{ 'option-selected': selectedPayment === item }"
            @click="selectPayment(item)"
          >
            <text class="option-text" :class="{ 'text-selected': selectedPayment === item }">{{ item }}</text>
          </view>
        </view>
      </view>
      
      <!-- 附件上传 -->
      <view class="form-item">
        <view class="form-label">
          <text>附件</text>
        </view>
        <view class="form-input">
          <text class="placeholder-style">请上传加油票据</text>
        </view>
      </view>
    </view>
    
    <!-- 上传区域 -->
    <view class="upload-area">
      <view class="upload-list">
        <view class="upload-item" v-for="(image, index) in uploadedImages" :key="index">
          <image class="uploaded-image" :src="image" mode="aspectFill"></image>
          <view class="delete-icon" @click="deleteImage(index)">
            <image src="/static/close_img.png" class="close-icon-img"></image>
          </view>
        </view>
        <view class="upload-item add-button" @click="chooseImage" v-if="uploadedImages.length < 4">
          <text class="add-icon">+</text>
        </view>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-button-area">
      <button class="submit-button" @click="submitForm">提交</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      fuelOptions: ['92#', '95#', '98#', '柴油'],
      selectedFuel: '92#',
      fuelAmount: '',
      fuelCost: '',
      fuelLocation: '',
      paymentOptions: ['支付宝', '微信', '现金', '其他'],
      selectedPayment: '支付宝',
      uploadedImages: [],
    }
  },
  methods: {
    goBack() {
     uni.navigateBack({
        delta: 1
      });
    },
    selectFuel(fuel) {
      this.selectedFuel = fuel;
    },
    selectPayment(payment) {
      this.selectedPayment = payment;
    },
    chooseImage() {
      uni.chooseImage({
        count: 4, // 最多可以选择的图片张数
        success: (res) => {
          // 将新选择的图片添加到已有的图片中
          this.uploadedImages = [...this.uploadedImages, ...res.tempFilePaths];
          // 最多保留4张图片
          if (this.uploadedImages.length > 4) {
            this.uploadedImages = this.uploadedImages.slice(0, 4);
          }
        }
      });
    },
    deleteImage(index) {
      // 删除指定索引的图片
      this.uploadedImages.splice(index, 1);
    },
    submitForm() {
      // 表单验证
      if (!this.fuelAmount) {
        uni.showToast({
          title: '请输入加油量',
          icon: 'none'
        });
        return;
      }
      
      if (!this.fuelCost) {
        uni.showToast({
          title: '请输入加油金额',
          icon: 'none'
        });
        return;
      }
      
      if (!this.fuelLocation) {
        uni.showToast({
          title: '请输入加油地点',
          icon: 'none'
        });
        return;
      }
      
      // 提交表单数据
      const formData = {
        fuelType: this.selectedFuel,
        fuelAmount: this.fuelAmount,
        fuelCost: this.fuelCost,
        fuelLocation: this.fuelLocation,
        paymentMethod: this.selectedPayment,
        receipts: this.uploadedImages,
      };
      
      console.log('提交表单:', formData);
      
      // 模拟提交成功
      uni.showLoading({
        title: '提交中'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        });
        
        // 提交成功后返回上一页
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }, 2000);
    },
    navigateToFuelRecords() {
      uni.navigateTo({
        url: '/pages/equipment/refuel/records/index?id=BH-001'
      });
    }
  }
}
</script>

<style>
.container {
  flex: 1;
  background-color: #F5F7FA;
  width: 100%;
}

.nav-bar {
  height: 88px;
  background: linear-gradient(103deg, #4980FF -4%, #2B6BFF 99%);
  padding-top: 44px;
  padding-left: 15px;
  padding-right: 15px;
  flex-direction: row;
  align-items: center;
  position: relative;
}

.left {
  position: absolute;
  left: 15px;
  height: 24px;
  width: 24px;
  justify-content: center;
  align-items: center;
}

.back-icon {
  width: 24px;
  height: 24px;
}

.nav-title {
  font-size: 18px;
  color: #FFFFFF;
  font-weight: 500;
  margin-left: 24px;
}

/* 设备信息卡片 */
.equipment-card {
  width: 95%;
  margin: 8px auto;
  background-color: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card-content {
  padding: 15px;
}

.title-row {
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
}

.equipment-title {
  font-size: 18px;
  font-weight: bold;
  color: #242731;
}

.equipment-id {
  font-size: 16px;
  color: #72767C;
  margin-left: 12px;
}

.equipment-image {
  width: 100%;
  height: 100px;
  justify-content: center;
  align-items: center;
}

.equipment-img {
  width: 100%;
  height: 100px;
  object-fit: contain;
}

.stats-row {
  flex-direction: row;
  align-items: center;
  margin-top: 8px;
}

.stat-item {
  flex-direction: row;
  align-items: center;
}

.stat-icon {
  width: 16px;
  height: 16px;
  justify-content: center;
  align-items: center;
  margin-right: 4px;
}

.stat-icon-img {
  width: 14px;
  height: 14px;
}

.icon-text {
  font-family: 'iconfont';
  font-size: 14px;
  color: #515151;
}

.stat-text {
  font-size: 12px;
  color: #72767C;
}

/* 表单样式 */
.form-container {
  width: 100%;
  margin: 0;
  background-color: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
}

.form-item {
  height: 56px;
  flex-direction: row;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #E7E7E7;
}

.form-label {
  width: 81px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.9);
}

.form-input {
  font-size: 16px;
  padding-left: 16px;
}

.placeholder-style {
  color: rgba(0, 0, 0, 0.4);
  font-size: 16px;
}

.option-row {
  flex-direction: row;
  flex-wrap: wrap;
}

.option-item {
  height: 36px;
  width: 65.5px;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
  border-radius: 4px;
}

.option-text {
  font-size: 14px;
  color: #4E5969;
}

.option-selected {
  background-color: #E8F3FF;
}

.text-selected {
  color: #165DFF;
}

/* 上传区域 */
.upload-area {
  width: 95%;
  margin: 5px auto 0;
}

.upload-list {
  flex-direction: row;
  flex-wrap: wrap;
}

.upload-item {
  width: 80px;
  height: 80px;
  margin-right: 8px;
  margin-bottom: 8px;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

.uploaded-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.delete-icon {
  position: absolute;
  top: 0;
  right: 0;
  justify-content: center;
  align-items: center;
  padding: 4px;
  z-index: 10;
}

.add-button {
  background-color: #F5F7FA;
  border: 1px dashed #D9D9D9;
  justify-content: center;
  align-items: center;
}

.add-icon {
  font-size: 30px;
  color: #999999;
}

/* 提交按钮 */
.submit-button-area {
  width: 80%;
  margin: 0 auto;
}

.submit-button {
  height: 44px;
  background-color: #E8F3FF;
  color: #165DFF;
  font-size: 15px;
  font-weight: normal;
  border: none;
  border-radius: 22px;
  outline: none;
}

/* 消除按钮边框 */
button::after {
  border: none !important;
  outline: none !important;
}

.close-icon-img {
  width: 12px;
  height: 12px;
}
</style> 